<template>
  <div style="width: 100%; height:100%">
    <ImageMarker
      :img-path="imgPath"
      :rect-list.sync="rectList"
      :selected-rect-index.sync="selectedRectIndex"
      :minimum-size="[50, 50]"
    />
  </div>
</template>

<script>
import ImageMarker from '@/components/ImageMarker.vue'

export default {
  name: 'HomeView',
  components: {
    ImageMarker
  },
  data() {
    return {
      imgPath: '',
      rectList: [],
      selectedRectIndex: -1
    }
  },
  mounted() {
    this.imgPath = require('../assets/res.png')
    this.rectList = [
      {
        bottom: 0.15602094240837697,
        left: -0.004803073967339097,
        right: 0.9942363112391931,
        top: -0.0031413612565445027,
        inputName: 'input1'
      },
      {
        bottom: 0.7,
        left: 0.255,
        right: 0.9,
        top: 0.65,
        inputName: 'input2'
      }
    ]
    this.selectedRectIndex = 1
  }
}
</script>
